<style scoped lang="scss">
.el-input {
  width: 200px;
}

.el-form {
  margin-bottom: -15px;
}
</style>
<template>
  <div class='public_page'>
    <el-form inline :model="searchParams" ref="refSearchParams">
      <el-form-item label="出通单号">
        <el-input v-model="searchParams.shippingOrderNumber" placeholder="请输入出通单号" clearable @clear="getTableList" />
      </el-form-item>
      <el-form-item label="物流公司">
        <el-select v-model="searchParams.companyName" filterable placeholder="请输入物流公司" clearable @clear="getTableList">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchTableList">搜 索</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待发货" name="Waiting"></el-tab-pane>
      <el-tab-pane label="运输中" name="Transit"></el-tab-pane>
      <el-tab-pane label="已到货" name="Arrived"></el-tab-pane>
      <el-tab-pane label="已签收" name="Delivered"></el-tab-pane>
      <el-tab-pane label="已评价" name="reviewed"></el-tab-pane>
    </el-tabs>
    <el-table v-bind="propsRes.table" style="height: 100%;" v-loading="loading" v-on="tableEvent">
      <el-table-column align="center" show-overflow-tooltip min-width="180px" label="出通单号(物流单号)">
        <template #default="scope">
          <el-button link @click="openDetail(scope.row.shippingOrderNumber)" type="primary">{{
            scope.row.shippingOrderNumber }}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="expectedTime" min-width="150px"
        label="预计出货日期"></el-table-column>
      <el-table-column align="center" v-if="activeName !== 'Waiting'" show-overflow-tooltip prop="pickupTime"
        min-width="150px" label="取货日期"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="companyName" min-width="150px"
        label="物流公司"></el-table-column>
      <el-table-column align="center" v-if="activeName !== 'reviewed'" show-overflow-tooltip min-width="200px"
        label="物流公司联系人/联系电话">
        <template #default="scope">
          <span v-if="scope.row.companyContactName || scope.row.companyContactPhone">
            {{ scope.row.companyContactName }}/{{ scope.row.companyContactPhone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="180px" label="收货人/联系电话">
        <template #default="scope">
          <span v-if="scope.row.consignee || scope.row.phone">
            {{ scope.row.consignee }}/{{ scope.row.phone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="consigneeAddress" min-width="180px"
        label="收货地址"></el-table-column>
      <el-table-column align="center" v-if="activeName === 'Delivered' || activeName === 'reviewed'" show-overflow-tooltip
        min-width="150px" label="签收人/联系电话">
        <template #default="scope">
          <span v-if="scope.row.signee || scope.row.signeePhone">
            {{ scope.row.signee }}/{{ scope.row.signeePhone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" v-if="activeName === 'Delivered' || activeName === 'reviewed'" show-overflow-tooltip
        min-width="150px" label="回执查看">
        <template #default="scope">
          <el-image preview-teleported :src="'https://yunsrm.hien.cn/file/' + scope.row.recepit"
            :preview-src-list="['https://yunsrm.hien.cn/file/' + scope.row.recepit]"
            style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column v-if="activeName === 'reviewed'" align="center" show-overflow-tooltip prop="overallScore"
        min-width="150px" label="总体评分">
        <template #default="{ row }">
          <template v-if="row.overallScore !== ''">
            <el-rate v-model="row.overallScore" disabled text-color="#ff9900" />
          </template>
          <template v-else>
            未评价
          </template>
        </template>
      </el-table-column>
      <el-table-column v-if="activeName === 'reviewed'" align="center" show-overflow-tooltip prop="commentContent"
        min-width="150px" label="评价内容">
        <template #default="{ row }">
          <template v-if="row.commentContent !== ''">
            {{ row.commentContent }}
          </template>
          <template v-else>
            未评价
          </template>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="160" v-if="activeName !== 'Waiting'">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="categoryAdd(scope.row.shippingOrderNumber)">物流查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="public_pagination">
      <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
    </div>
    <deliverInfo ref="formRef" @updateList="getTableList"></deliverInfo>
    <showDetail ref="showDetail1" @updateList="getTableList"></showDetail>
  </div>
</template>

<script setup>
import useTableProps from '@/hooks/tableList'
import { postDeliverPageCompanyInformation, postDeliverFindpage } from '@/api/deliveryOrder.js'
import deliverInfo from "@/views/components/deliveInfo.vue";
import showDetail from "@/views/components/showDetail.vue";
const refSearchParams = ref(null)
const formRef = ref(null)
const showDetail1 = ref(null)
const searchParams = reactive({
  shippingOrderNumber: '',
  companyName: '',
  shippingStatus: 'Waiting'
})
const options = []

const activeName = ref('Waiting')

const { loading, propsRes, tableEvent, paginationEvent, tableRef, searchTableList, getTableList } = useTableProps({
  searchParams,
  url: postDeliverFindpage
})

const getDeliverList = async () => {
  try {
    const res = await postDeliverPageCompanyInformation({})
    res.data.forEach(item => {
      options.push({
        value: item.companyName,
        label: item.companyName
      })
    })
  }
  catch (err) {
    console.log(err);
  }
}
onMounted(() => {
  getDeliverList()
  getTableList()
})
const openDetail = (shippingOrderNumber) => {
  showDetail1.value.getParent(shippingOrderNumber)
  console.log(shippingOrderNumber)
}
const handleClick = (tab) => {
  searchParams.shippingStatus = tab.props.name
  searchTableList()
}
const categoryAdd = async (shippingOrderNumber) => {
  formRef.value.getParent(shippingOrderNumber);
};

onMounted(() => {

})
</script>